import {
  nextTick
} from 'vue'

export default function (id, str, isDom) {
  nextTick(() => {
    let marker = null
    if (isDom) {
      marker = id
    } else {
      marker = document.querySelector(`#${id}`)
    }
    const canvas = document.createElement('canvas')
    canvas.width = 200
    canvas.height = 200
    const cans = canvas.getContext('2d')
    cans.rotate((-20 * Math.PI) / 180)
    cans.font = '14px Microsoft JhengHei'
    cans.fillStyle = 'rgba(200, 200, 200, 0.50)'
    cans.textAlign = 'left'
    cans.textBaseline = 'Middle'
    cans.fillText(str, 0, canvas.height / 3)
    marker.style.background = '#fff url(' + canvas.toDataURL('image/png') + ') left top repeat'
  })
}
